<template>
    <div class="infomanage-box">
      <el-card class="box-card">
        <div style="width: 80%;height: 60%;margin: auto;margin-top: 50px">

          <!-- 新闻管理 -->
          <div style="width: 30%;height: 100%;float:left">
            <img style="width: 100%;height: 80%;" src="../../assets/info/new.png">
            <button class="info-btn" @click="gotoNews()">新闻管理</button>
          </div>

          <!-- 通知管理 -->
          <div style="width: 30%;height: 100%;float:left">
            <img style="width: 100%;height: 80%;float:left" src="../../assets/info/notice.png">
            <button class="info-btn" @click="gotoNotify()">通知管理</button>
          </div>

          <!-- 发布 -->
          <div style="width: 30%;height: 100%;float:left">
            <img style="width: 100%;height: 80%;float:left" src="../../assets/info/release.png">
            <button class="info-btn" @click="gotoRelease()">发布</button>
          </div>
        </div>
      </el-card>
    </div>
</template>

<script>

export default {
	data() {
		return {

		}
	},
	created() {
	},
	methods: {
		gotoNews() {
			this.$router.push('/dist/manage/news')
		},
		gotoNotify() {
			this.$router.push('/dist/manage/announce')
		},
		gotoRelease() {
			this.$router.push('/dist/manage/release');
		}
	},
}
</script>

<style lang="less" scoped>
.infomanage-box {
    width: 100%;
    height: 100%;
}

.box-card {
    width: 100%;
    height: 100%;
}

.info-btn {
    width: 80%;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 20px;
    height: 55px;
    text-align:center;
    border: none;
    background-size: 300% 100%;

    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;

    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

.info-btn:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}


</style>
